<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableBtns="tableBtns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.actStartTime"
            :end.sync="form.actEndTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import SearchDatePicker from '@/components/SearchDatePicker'
import { externalActivityList, offLineExActivity } from '@/api/activity'
import formatter from '@/utils/format'
import { typeMap } from '@/utils/format'
export default {
  name: 'ExternalActivityList',
  components: { TableSearch, SearchDatePicker },
  data() {
    return {
      form: {
        endTime: null,
        startTime: null,
        actStatus: 'ALL',
      },
      tableBtns: [
        {
          label: '新增',
          click: () => this.$router.push({ path: '/activity/externalAdd' }),
          icon: 'el-icon-plus',
          resourceId:
            '/web/activity-management/externalActivity-management/新增活动',
        },
      ],
      searchPath: '/web/activity-management/externalActivity-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'actName',
          placeholder: '请输入活动名称',
          clearable: true,
          resourceId:
            '/web/activity-management/externalActivity-management/活动名称',
        },
        {
          type: 'text',
          value: 'actMchName',
          placeholder: '请输入代理商',
          clearable: true,
          resourceId:
            '/web/activity-management/externalActivity-management/参与代理商',
        },
        {
          slot: 'date',
        },
        {
          type: 'radio',
          value: 'actStatus',
          options: [
            {
              label: 'ALL',
              text: '全部',
            },
            {
              label: 'NOT_STARTED',
              text: '未开始',
            },
            {
              label: 'ON_LINE',
              text: '上线',
            },
            {
              label: 'OFF_LINE',
              text: '下线',
            },
          ],
          resourceId:
            '/web/activity-management/externalActivity-management/状态',
        },
      ],
      loading: true,
      tableData: {},
      columns: [
        {
          label: '活动ID',
          prop: 'id',
          resourceId:
            '/web/activity-management/externalActivity-management/活动ID',
        },
        {
          label: '活动名称',
          prop: 'actName',
          resourceId:
            '/web/activity-management/externalActivity-management/活动名称',
        },
        {
          label: '开始时间',
          prop: 'actStartTime',
          formatter,
          resourceId:
            '/web/activity-management/externalActivity-management/开始时间',
        },
        {
          label: '结束时间',
          prop: 'actEndTime',
          formatter,
          resourceId:
            '/web/activity-management/externalActivity-management/结束时间',
        },
        {
          label: '时长卡类型',
          prop: 'timecardType',
          resourceId:
            '/web/activity-management/externalActivity-management/时长卡类型',
          formatter: (row) => {
            return typeMap.externalTimeCardType[row.timecardType]
          },
        },
        {
          label: '套餐类型',
          prop: 'exActType',
          resourceId:
            '/web/activity-management/externalActivity-management/套餐类型',
          formatter: (row) => {
            return typeMap.externalActivityType[row.exActType]
          },
        },
        {
          label: '活动详情',
          prop: 'actDescription',
          resourceId:
            '/web/activity-management/externalActivity-management/活动详情',
        },
        {
          label: '参与代理商',
          prop: 'actMchName',
          resourceId:
            '/web/activity-management/externalActivity-management/参与代理商',
        },
        {
          label: '状态',
          prop: 'actStatus',
          formatter,
          resourceId:
            '/web/activity-management/externalActivity-management/状态',
        },
        {
          label: '操作',
          resourceId:
            '/web/activity-management/externalActivity-management/操作',
          buttons: [
            {
              label: '详情',
              size: 'small',
              click: (row) => {
                this.$router.push({
                  path: `/activity/externalDetail/${row.id}`,
                })
              },
              resourceId:
                '/web/activity-management/externalActivity-management/详情',
            },
            {
              label: '编辑',
              size: 'small',
              ifRender: (row) => {
                return row.actStatus === 0
              },
              click: (row) => {
                this.$router.push({
                  path: `/activity/externalEdit/${row.id}`,
                })
              },
              resourceId:
                '/web/activity-management/externalActivity-management/编辑',
            },
            {
              label: '复制',
              size: 'small',
              click: (row) => {
                this.$router.push({
                  path: `/activity/externalCopy/${row.id}`,
                })
              },
              resourceId:
                '/web/activity-management/externalActivity-management/复制',
            },
            {
              label: '下线',
              size: 'small',
              click: this.handleOffLine,
              ifRender: (row) => {
                return row.actStatus === 1
              },
              resourceId:
                '/web/activity-management/externalActivity-management/下线',
            },
          ],
        },
      ],
    }
  },
  methods: {
    reset() {
      this.form = {
        endTime: null,
        startTime: null,
        status: null,
      }
    },
    handleTableData(params) {
      this.loading = true
      this.form.actStatus === 'ALL' && delete params.actStatus
      externalActivityList(params).then(
        (res) => {
          this.loading = false
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        },
        () => {
          this.loading = false
        }
      )
    },
    refreshTable() {
      this.$refs.tableSearch.refreshTable()
    },
    handleOffLine(row) {
      console.log(row)
      this.$confirm(`你确定要下线（${row.actName}）活动吗？`, '提示', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      })
        .then(() => {
          const actStatus = ['NOT_STARTED', 'OFF_LINE', 'ON_LINE']
          offLineExActivity({
            id: row.id,
            status: actStatus[row.actStatus],
          }).then(() => {
            this.$message({
              showClose: true,
              message: '下线成功',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
  },
}
</script>
